<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="webservices.helper.Helper"%>

<html>
<body>
	<div id="main">
		<jsp:include page="banner.jsp">
			<jsp:param name="page" value="slideManage" />
			<jsp:param name="courseName" value="<%=request.getParameter(\"courseName\")%>" />
		</jsp:include>
		<div id="slideList"></div>
	</div>
</body>
<style>
#main {
	width: 800px;
	margin: auto;
}
#slideList {
	width: 100%;
	margin-top: 50px;
}

#slideList table,
#slideList td,
#slideList th {
	border: 1px solid gray;
	border-collapse: collapse;
	text-align: center;
}

.header {
	text-align: center;
	margin: 50px auto 20px;
}

#slideList table {
	width: 100%;
	table-layout: fixed;
}
#slideList table input {
	width: 100%;
}
#slideList td {
	padding: 2px;
}
</style>
<body>
</body>

<script>
var courseID = <%="'" + Helper.decodeUtf8(request.getParameter("courseID")) + "'" %>;

function addSlide(elem){
	var cells = elem.parentNode.parentNode.cells;
		slideName = cells[1].firstChild.value,
		description = cells[2].firstChild.value,
		file = cells[3].firstChild.files[0],
		formData = new FormData();

	formData.append('action', 'add');
	formData.append('courseID', courseID);
	formData.append('slideName', slideName);
	formData.append('description', description);
	formData.append('file', file);
	
	var xhr = new XMLHttpRequest();
	xhr.open('POST', "servlet/SlideManage", true);
	xhr.onreadystatechange = function(){
		if (xhr.readyState==4 && xhr.status==200) {
			console.log(xhr.responseText);
			loadData();
		}
	};
	
	xhr.send(formData);
	
}

function deleteSlide(slideID, slideName){
	var xhr = new XMLHttpRequest(),
		formData = new FormData();
	formData.append('action', 'delete');
	formData.append('courseID', courseID);
	formData.append('slideID', slideID);
	formData.append('slideName', slideName);
	xhr.open('POST', "servlet/SlideManage", true);
	xhr.onreadystatechange = function(){
		if (xhr.readyState==4 && xhr.status==200) {
			console.log(xhr.responseText);
			loadData();
		}
	};
	xhr.send(formData);
	
}

function loadData(){
	var xhr = new XMLHttpRequest();
	
	xhr.open("GET", "servlet/SlideQuery?courseID=" + <%="'" + Helper.decodeUtf8(request.getParameter("courseID")) + "'" %>, false);
	
	xhr.send("null");
	
	eval("var data = " + xhr.responseText);
	
	var tableHTML = '<table>';
	tableHTML += '<colgroup><col width="5%"><col width="20%"><col width="40%"><col width="25%"><col width="10%"></colgroup>';
	tableHTML += '<tr><th>#</th><th>课件名称</th><th>描述</th><th>文件</th><th>操作</th></tr>';
	for (var i = 0; i < data.length; i++ ){
		tableHTML += '<tr>';
		tableHTML += '<td>' + data[i].slideID + '</td>';
		tableHTML += '<td><input value="' + data[i].name + '" name="name"></td>';
		tableHTML += '<td><input value="' + data[i].description + '" name="description"></td>';
		tableHTML += '<td>'+data[i].link+'</td>';
		tableHTML += '<td><button onclick="deleteSlide(\'' + data[i].slideID + '\', \'' + data[i].name + '\');">删除</button></td>';
		tableHTML += '</tr>';
	}
	if (data.length == 0){
		tableHTML += '<tr><td colspan="5">无课件信息</td></tr>';
	}
	tableHTML += '<tr style="border-top:3px solid black;">';
	tableHTML += '<td></td>';
	tableHTML += '<td><input name="name"></td>';
	tableHTML += '<td><input name="description"></td>';
	tableHTML += '<td><input name="file" type="file"></td>';
	tableHTML += '<td><button onclick="addSlide(this);">新增</button></td>';
	tableHTML += '</tr>';
	tableHTML += '</table>';
	
	var div = document.getElementById('slideList');
	if (!div){
		div = document.createElement('div');
		div.id = 'slideList';
		document.body.appendChild(div);
	}
	div.innerHTML = tableHTML;
}

window.onload = function(){
	loadData();
};
</script>
</html>